<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            height: 40px;
            width: 40px;
            background-color: cadetblue;
            border-radius: 50%;
            animation: falldown 2s, fadein 2s,fadeout 2s backwards;
        }

        @keyframes falldown {
            100% {
                transform: translate(0,240px);
            }
        }

        @keyframes fadein {
            100% {
                opacity: 1;
            }
        }

        @keyframes fadeout {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="box">
    </div>
</body>

</html>